<template>
  <div class="le-1">
    <div class="ban-1">
      <el-icon color="#409EFC" class="no-inherit">
        <HotWater />
      </el-icon>
      办事大厅
    </div>
    <el-carousel :autoplay="flag" arrow="never">
      <el-carousel-item
        v-for="(page, pageIndex) in carouselData"
        :key="pageIndex"
        style="height: 300px"
      >
        <div v-for="(item, index) in page" :key="index" class="texs-1">
          <div class="icon-1"></div>
          <div>{{ item.name }}</div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script lang="ts" setup>
import type { additionalProperties1 } from '@/services/types/Applic'
defineProps<{
  carouselData: additionalProperties1[]
}>()
const flag = ref(false)
</script>

<style lang="scss" scoped>
.le-1 {
  width: 300px;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  //background-color: rgb(53, 221, 11);
}
:deep() .el-carousel__indicators {
  text-align: center;
  bottom: 0px;

  .el-carousel__button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #999;
  }
}
.ban-1 {
  height: 40px;
  background: #f5f8fc;
  border-bottom: 1px solid #197dca;
  display: flex;
  align-items: center;
}
.texs-1 {
  width: 100%;
  height: 28px;
  display: flex;
  align-items: center;
  margin: 5px 0;
  cursor: pointer;
}
.icon-1 {
  width: 25px;
  height: 25px;
  //background: #000;
  background-image: url('../../../../assets/head/t-1.png');
  background-size: 100% 100%;
  margin: 0 3px;
}
</style>
